<template>
  <div class="bh-container">
    <role-table
      ref="table"
      @open-add="() => modal.openAdd()"
      @open-update="(e) => modal.openUpdate(e)"
      @open-grant-role="(e) => grant.open(e)"
    ></role-table>
    <!-- 新增编辑角色模态框  -->
    <role-from ref="modal" @restart="() => table.restartCallback()"></role-from>
    <!-- 分配角色权限模态框 -->
    <role-grant ref="grant" />
  </div>
</template>

<script setup lang="ts">
  import RoleTable from './components/role-table.vue';
  import RoleFrom from './components/role-from.vue';
  import RoleGrant from './components/role-grant.vue';
  import {useDictStore } from '@/store';

  const render = ref(false);
  const table = ref();
  const modal = ref();
  const grant = ref();
  onBeforeMount(async () => {
    const dictStore = useDictStore();
    await dictStore.loadKeys(['organization_type']);
    render.value = true;
  });
</script>

<style scoped lang="less"></style>
